<template>
  <div class="panel connention">
    <div class="title">分支名称</div>
    <el-input v-model="form.name" clear="name" placeholder="请填写分支名称"></el-input>

    <div class="title" style="margin-top: 12px;margin-bottom: 0px;">选择触发条件</div>
    <conditionForm
          :fieldsList="fieldList"
          :conditonList="filters"
          class="condition"
          type="filter"
        >
        </conditionForm>
    <!-- <div class="title">是否默认分支</div> -->
    <!-- <el-checkbox v-model="form.isDefault">当勾选后，在工单流转过程中，所有分支的条件均不满足时，默认走该分支</el-checkbox> -->
    <div class="oper-btn">
      <el-button size="mini" @click.stop="channel">取消</el-button>
      <el-button type="primary" size="mini" @click.stop="saveTask">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue';
import { commonAction } from '@/utils/common';
import { isValide } from '@/afterSales/components/conditionFilter/common';
const isHidden = ['group', 'associateService', 'associateSpare', 'associateUser']
const systenFields = ['master', 'activityName', 'source', 'orderCategory', 'orderStatus', 'createUser', 'updateUser', 'createTime', 'updateTime']
@Component({
  components: {
    conditionForm
  }
})

export default class extends Vue {
  [x: string]: any;
  @Prop({ default: [] }) private fields!: any
  @Prop({ default: {} }) private element!: any
  private filters = []
  private form = {
    name: ''
  }

  private get fieldList () {
    return this.fields.filter(item => {
      return !isHidden.includes(item.fieldType) && !systenFields.includes(item.businessId)
    })
  }

  private saveTask () {
    if (isValide(this.filters)) {
      this.$emit('saveTask', { name: this.form.name })
      commonAction({ url: '/server-flow/action/definition/activity/save', method: 'post', data: Object.assign({}, { filters: this.filters, activityId: this.element.id, workModelId: this.$route.params.businessId }) })
    }
  }

  private channel () {
    this.$emit('channel')
  }

  public getConfigById (element: any) {
    this.form.name = element.businessObject?.name || ''
    commonAction({ url: `/server-flow/action/definition/activity?activityId=${element.id}&workModelId=${this.$route.params.businessId}`, method: 'get' }).then(res => {
      if (res.success) {
        console.log(res)
        this.filters = res.data?.filters || []
      }
    })
  }
}
</script>
<style scoped lang="stylus">
.oper-btn {
  text-align: right;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
  padding-right: 24px;
  padding-bottom: 12px;
  z-index: 20;
  width: 500px;
}
.connention
  padding: 24px 24px 50px 24px;
  background-color: #fff
</style>
